<!DOCTYPE html>
<html lang="zh-CN" class="scroll-smooth">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind CSS 暗黑模式演示</title>
    <!-- 引入 Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入 Font Awesome 图标 -->
    <link
      href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"
      rel="stylesheet"
    />

    <!-- 配置 Tailwind 自定义颜色和字体 -->
    <script>
      tailwind.config = {
        darkMode: "class", // 使用类名切换暗黑模式
        theme: {
          extend: {
            colors: {
              primary: "#3B82F6", // 蓝色作为主色调
              secondary: "#10B981", // 绿色作为辅助色
            },
            fontFamily: {
              sans: ["Inter", "system-ui", "sans-serif"],
            },
          },
        },
      };
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
      @layer utilities {
        .content-auto {
          content-visibility: auto;
        }
        .text-shadow {
          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .dark .text-shadow {
          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }
      }
    </style>
  </head>

  <body
    class="transition-colors duration-300 bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-100 min-h-screen flex flex-col"
  >
    <!-- 导航栏 -->
    <header
      class="sticky top-0 z-50 bg-white/80 dark:bg-gray-800/80 backdrop-blur-md shadow-sm transition-all duration-300"
    >
      <div
        class="container mx-auto px-4 py-4 flex justify-between items-center"
      >
        <div class="flex items-center space-x-2">
          <i
            class="fa fa-moon-o text-2xl text-primary dark:text-secondary transition-colors duration-300"
          ></i>
          <h1 class="text-xl font-bold">暗黑模式演示</h1>
        </div>

        <!-- 模式切换按钮 -->
        <button
          id="theme-toggle"
          class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-primary dark:focus:ring-secondary"
        >
          <i class="fa fa-sun-o dark:hidden text-yellow-500"></i>
          <i class="fa fa-moon-o hidden dark:inline-block text-blue-300"></i>
        </button>
      </div>
    </header>

    <!-- 主要内容 -->
    <main class="flex-grow container mx-auto px-4 py-8">
      <!-- 介绍部分 -->
      <section class="mb-12 text-center">
        <h2 class="text-[clamp(1.8rem,4vw,3rem)] font-bold mb-4 text-shadow">
          Tailwind CSS 暗黑模式
        </h2>
        <p
          class="text-lg md:text-xl max-w-2xl mx-auto text-gray-600 dark:text-gray-400"
        >
          这个演示展示了如何使用 Tailwind CSS
          实现暗黑模式切换功能。点击右上角的按钮可以在明/暗模式之间切换，体验不同的视觉效果。
        </p>
      </section>

      <!-- 卡片展示 -->
      <section
        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12"
      >
        <!-- 卡片 1 -->
        <div
          class="bg-white dark:bg-gray-800 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden"
        >
          <div
            class="h-48 bg-gradient-to-r from-blue-400 to-indigo-500 dark:from-blue-600 dark:to-indigo-700 relative"
          >
            <i
              class="fa fa-code absolute top-4 right-4 text-white/70 text-3xl"
            ></i>
          </div>
          <div class="p-6">
            <h3 class="text-xl font-semibold mb-2">代码示例</h3>
            <p class="text-gray-600 dark:text-gray-400 mb-4">
              使用 Tailwind 的 dark:
              前缀可以轻松定义暗黑模式下的样式，无需编写额外的 CSS。
            </p>
            <div
              class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg text-sm font-mono overflow-x-auto"
            >
              <code>
                &lt;div class="bg-white dark:bg-gray-800"&gt;<br />
                &nbsp;&nbsp;这是一个支持暗黑模式的元素<br />
                &lt;/div&gt;
              </code>
            </div>
          </div>
        </div>

        <!-- 卡片 2 -->
        <div
          class="bg-white dark:bg-gray-800 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden"
        >
          <div
            class="h-48 bg-gradient-to-r from-green-400 to-teal-500 dark:from-green-600 dark:to-teal-700 relative"
          >
            <i
              class="fa fa-paint-brush absolute top-4 right-4 text-white/70 text-3xl"
            ></i>
          </div>
          <div class="p-6">
            <h3 class="text-xl font-semibold mb-2">颜色方案</h3>
            <p class="text-gray-600 dark:text-gray-400 mb-4">
              暗黑模式使用高对比度的颜色方案，减轻眼睛疲劳，特别适合在低光环境下使用。
            </p>
            <div class="flex space-x-2">
              <span
                class="w-8 h-8 rounded-full bg-primary dark:bg-primary/80"
              ></span>
              <span
                class="w-8 h-8 rounded-full bg-secondary dark:bg-secondary/80"
              ></span>
              <span
                class="w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700"
              ></span>
              <span
                class="w-8 h-8 rounded-full bg-gray-800 dark:bg-gray-200"
              ></span>
            </div>
          </div>
        </div>

        <!-- 卡片 3 -->
        <div
          class="bg-white dark:bg-gray-800 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden"
        >
          <div
            class="h-48 bg-gradient-to-r from-purple-400 to-pink-500 dark:from-purple-600 dark:to-pink-700 relative"
          >
            <i
              class="fa fa-cog absolute top-4 right-4 text-white/70 text-3xl"
            ></i>
          </div>
          <div class="p-6">
            <h3 class="text-xl font-semibold mb-2">用户偏好</h3>
            <p class="text-gray-600 dark:text-gray-400 mb-4">
              网站可以检测用户系统的颜色偏好，并自动应用相应的模式，提供个性化的浏览体验。
            </p>
            <button
              class="px-4 py-2 bg-primary hover:bg-primary/90 dark:bg-secondary dark:hover:bg-secondary/90 text-white rounded-lg transition-colors duration-300"
            >
              查看设置
            </button>
          </div>
        </div>
      </section>

      <!-- 表单示例 -->
      <section class="mb-12 bg-white dark:bg-gray-800 p-6 rounded-xl shadow-md">
        <h3 class="text-2xl font-semibold mb-6">表单元素</h3>
        <form class="max-w-md mx-auto">
          <div class="mb-4">
            <label for="name" class="block text-sm font-medium mb-1"
              >姓名</label
            >
            <input
              type="text"
              id="name"
              class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-primary dark:focus:ring-secondary transition-colors duration-300"
            />
          </div>

          <div class="mb-4">
            <label for="email" class="block text-sm font-medium mb-1"
              >邮箱</label
            >
            <input
              type="email"
              id="email"
              class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-primary dark:focus:ring-secondary transition-colors duration-300"
            />
          </div>

          <div class="mb-6">
            <label for="message" class="block text-sm font-medium mb-1"
              >留言</label
            >
            <textarea
              id="message"
              rows="3"
              class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-primary dark:focus:ring-secondary transition-colors duration-300"
            ></textarea>
          </div>

          <div class="flex items-center mb-6">
            <input
              type="checkbox"
              id="subscribe"
              class="w-4 h-4 text-primary dark:text-secondary focus:ring-primary dark:focus:ring-secondary rounded transition-colors duration-300"
            />
            <label for="subscribe" class="ml-2 text-sm">订阅我们的通讯</label>
          </div>

          <button
            type="submit"
            class="w-full px-4 py-2 bg-primary hover:bg-primary/90 dark:bg-secondary dark:hover:bg-secondary/90 text-white rounded-lg transition-colors duration-300"
          >
            提交
          </button>
        </form>
      </section>
    </main>

    <!-- 页脚 -->
    <footer
      class="bg-white dark:bg-gray-800 py-6 shadow-inner transition-colors duration-300"
    >
      <div
        class="container mx-auto px-4 text-center text-gray-600 dark:text-gray-400"
      >
        <p>
          &copy; 2023 Tailwind CSS 暗黑模式演示 | 使用
          <i class="fa fa-heart text-red-500"></i> 制作
        </p>
        <p class="mt-2 text-sm">
          当前模式: <span id="current-mode">亮色模式</span>
        </p>
      </div>
    </footer>

    <!-- JavaScript 代码 -->
    <script>
      // 检查用户偏好或本地存储的设置
      function checkDarkModePreference() {
        // 检查本地存储中是否有保存的设置
        const savedMode = localStorage.getItem("darkMode");

        // 如果有保存的设置，使用它
        if (savedMode !== null) {
          return savedMode === "true";
        }

        // 否则检查用户的系统偏好
        return window.matchMedia("(prefers-color-scheme: dark)").matches;
      }

      // 应用暗黑模式
      function applyDarkMode(isDark) {
        const htmlElement = document.documentElement;
        const modeText = document.getElementById("current-mode");

        if (isDark) {
          htmlElement.classList.add("dark");
          modeText.textContent = "暗色模式";
        } else {
          htmlElement.classList.remove("dark");
          modeText.textContent = "亮色模式";
        }

        // 保存设置到本地存储
        localStorage.setItem("darkMode", isDark);
      }

      // 初始化页面
      document.addEventListener("DOMContentLoaded", () => {
        // 检查并应用初始模式
        const isDarkMode = checkDarkModePreference();
        applyDarkMode(isDarkMode);

        // 模式切换按钮事件
        const themeToggle = document.getElementById("theme-toggle");
        themeToggle.addEventListener("click", () => {
          const isDark = document.documentElement.classList.toggle("dark");
          applyDarkMode(isDark);
        });

        // 监听系统偏好变化
        window
          .matchMedia("(prefers-color-scheme: dark)")
          .addEventListener("change", (e) => {
            applyDarkMode(e.matches);
          });
      });
    </script>
  </body>
</html>
